<template>
  <div>
    <el-row>
      <el-col :span="8" :xs="22">
        <div class="head-container">
          <el-input v-model="flowName" placeholder="请输入流程名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 10px" />
        </div>
        <div class="head-container">
          <el-tree :data="flowOptions"
            :props="defaultProps"
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
        >
        <!--过长处理，鼠标悬浮文字弹框显示全部内容-->
        <span slot-scope="{ node }">
                  <el-tooltip class="item" effect="light" :content="node.label" placement="top-start" v-if="node.label.length>12">
                    <span > {{ node.label | ellipsis(12) }} </span>
                  </el-tooltip>
                  <span v-if="node.label.length<=12">{{node.label}}</span>
         </span>
        </el-tree>
        </div>
      </el-col>
      <el-col :span="14" :xs="22">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="流程名称" class="form-item">
          {{form.workflowName}}
          </el-form-item>
          <el-form-item label="业务类型"  class="form-item">
            {{form.businessTypeName}}
          </el-form-item>
          <el-form-item label="应用范围"  class="form-item">
            {{applyScopeFormat(form.applyScope)}}
          </el-form-item>
        </el-form>
          <el-steps direction="vertical" style="margin-left: 100px;" space="60px">
            <el-step  v-for="item in form.nodeList" :title="item.nodeName" :key="item.nodeId"
              :description="item.approvalRolesName" ></el-step>
          </el-steps>
         </el-col>
      </el-row>
  </div>
</template>

<script>
  import {
    previewDefination, getAllFlowDict
  } from "@/api/labdata/flowDefination";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    name: "FlowChoose",
    data() {
      return {
        applyScopeOptions:[],
        flowName:'',
        title:'',
        workflowId:null,
        // 遮罩层
        loading: true,
        flowOptions:[],
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    props:{
      id:Number,
      businessType:String,
      applyScope:String,
    },
    watch: {
      // 根据名称筛选部门树
      flowName(val) {
        this.$refs.tree.filter(val);
      },
    },
    created() {
      this.workflowId = this.id;
      this.getTreeselect();
      this.getDicts("applyScopeOpt").then(response => {
        this.applyScopeOptions = response.data;
      });
      //console.log('workflowId='+this.workflowId);
    },
    methods: {
      previewData(workflowId){
        this.workflowId = workflowId;
        previewDefination(workflowId).then(response => {
          this.form = response.data;
        });
      },
      getWorkflowId(){
        return this.workflowId;
      },
     // 状态字典翻译
     applyScopeFormat(applyScope) {
        console.log('applyScope='+applyScope)
       var applyScopeName = this.selectDictLabel(this.applyScopeOptions, applyScope);
       console.log('applyScopeName='+applyScopeName)
       return applyScopeName;
     },
      // 取消按钮
      cancel() {
        this.open = false;
        this.form = {};
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.previewData(data.id);
        this.$emit("workflow", data.id);
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        let query = {businessType:this.businessType, applyScope:this.applyScope}
        getAllFlowDict(query).then(response => {
          if(response.data.length>0){
            response.data.forEach(item =>{
              this.flowOptions.push({
                id:item.workflowId,
                label:item.workflowName
              });
            });
            let workFlowId = this.id;
            if(!workFlowId){
              workFlowId = this.flowOptions[0].id;
              this.$emit("workflow", workFlowId);
            }
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(workFlowId);
            });
             //设置选中
            this.previewData(workFlowId);
          }
        });
      },
    }
  };
</script>
<style type="text/css" scoped>
  .form-item{
    margin-bottom: 5px;
  }
</style>
